// 引入工具类函数
import utils from "./utils.js";
import "./common.js";
import {login , getNewAll , getAboutAll , getCampusBanner} from "./request.js";
// 调用函数发送请求
(async function(){
    let res = await login();
    let token = res.data.token;
    localStorage.setItem("token",token);

    // 获取全部 新闻模块数据
    let newAllData = await getNewAll();  
    let newsItem = newAllData.data.rows;
    console.log(newsItem);

    // 获取全部 关于我们模块数据
    let aboutUsAllData = await getAboutAll();
    let aboutUsItem = aboutUsAllData.data.rows;
    console.log(aboutUsItem);

    // 获取全部 轮播图模块数据
    let bannerAllData = await getCampusBanner();


    // 我要投递的数据
    let sendsArr = newsItem.filter((item)=>{
        return item.sketch === "毕业时间：";
    });
    sends(sendsArr);

    // 我要投递 的盒子样式动态改变
    let sendsItems = document.querySelectorAll('.item_styleA');
    sendsItems[1].classList.add("item_styleB")
    for(let i = 0 ; i < sendsItems.length ; i++ ){
        sendsItems[i].addEventListener('mouseenter',function(){
            if(this == sendsItems[0]) return ;
            for(let i = 0;i<sendsItems.length;i++){
                sendsItems[i].classList.remove("item_styleB");
            };
            this.classList.add("item_styleB");
        });
        sendsItems[i].addEventListener('mouseleave',function(){
            for(let i =0 ;i<sendsItems.length;i++){
                sendsItems[i].classList.remove("item_styleB");
                // sendsItems[i].classList.remove()
            };
            sendsItems[1].classList.add("item_styleB");
        });
    };

    // 我要投递的数据中心的数据
    let noticeCenter = aboutUsItem.filter((item)=>{
        return item.contact === "-";
    });
    notice(noticeCenter);

    // 选择感兴趣的职类  的数据
    let interested = newsItem.filter((item)=>{
        return item.sketch === "-";
    });
    interestedFn(interested);
    // 选择感兴趣的职类  动态效果
    let bannerItemAll =document.querySelectorAll('.major_detailsItem');
    bannerItemAll.forEach((item,index)=>{
        item.style['z-index']=index+1;

    });

    // 成长与福利 的数据
    let newcomer = newsItem.filter((item)=>{
      return item.sketch === "newpeople";
    })
    newPeople(newcomer);

    // 学长学姐说 的数据
    let bannerItem = bannerAllData.data.Carousels;//轮播图图片数组
    let bannerTextItem = aboutUsAllData.data.rows;
    let bannerTextArr = bannerTextItem.filter((item)=>{ //轮播图文本数组
      return item.contact === "人物志";
    });
    // 👆循环给文本数组添加url
    for(let i = 0; i< bannerItem.length;i++){
        bannerTextArr[i].url = bannerItem[i].url;
      };
    seniorFn(bannerTextArr);
    
    // 学长学姐说 轮播图滚动 效果实现
    let leftBtn = document.querySelector('.card_leftBtn');
    let rightBtn = document.querySelector('.card_rightBtn');
    let ul = document.querySelector('.card_list_container');
    //  轮播图最后两个节点
    let backItem1 = ul.lastElementChild.cloneNode(true);
    let backItem2 = ul.lastElementChild.previousElementSibling.cloneNode(true);
    // 轮播图最前面两个节点
    let beforeItem1 = ul.firstElementChild.cloneNode(true);
    let beforeItem2 = ul.firstElementChild.nextElementSibling.cloneNode(true);
    // 最前最后分别插入子节点
    ul.appendChild(beforeItem1);
    ul.appendChild(beforeItem2);
    ul.insertBefore(backItem1,ul.firstElementChild);
    ul.insertBefore(backItem2,ul.firstElementChild);
    
    let index = 1; //设置计数器
    let isclick = true;//设置开关防止恶劣用户疯狂点击
    rightBtn.onclick = function(){
      if(!isclick) return;
      isclick = false;
      index++;
      ul.style.transitionDuration = "0.3s";
      ul.style.transform = `translate(-${50 +index * 50}%)`;
    };
    leftBtn.onclick = function(){
      if(!isclick) return;
      isclick = false;
      index--;
      ul.style.transitionDuration = "0.3s";
      ul.style.transform = `translate(-${50 + index * 50}%)`;
    };
    ul.addEventListener('transitionend',function(){
        isclick = true;
        if(index > ul.children.length-4){
          index=1;
          ul.style.transitionDuration="0s";
          ul.style.transform = `translate(-${index * 100}%)`;
        }else if(index < 0){
          index = ul.children.length - 5;
          ul.style.transitionDuration="0s";
          ul.style.transform = `translate(-${index * 60}%)`;
        };
    });
})();


function Ant_Group($w) {
  return ($w / 1451) * 100 + "vw";
}

let str;

// 获取我要投递元素
let send = document.querySelector('.send_content');
// 我要投递模块 渲染函数
function sends(data){
    str = "";
    data.forEach((item)=>{
        str += `<div class="send_content_item item_styleA">
        <div class="img_container">
          <img
            src=${item.cover}
            alt=""
          />
        </div>
        <div class="title">
          <p>${item.title}</p>
        </div>
        <div class="text">
          <p>毕业时间：</p>
          <p>${item.content}</p>
        </div>
        <button class="main_send_btn pointer">
          <span>马上申请</span>
          <i class="iconfont icon-Rrl_s_145"></i>
        </button>
      </div>`
    });
    send.innerHTML = str;
};

// 获取 我要投递的通知中心 元素
let noticeCenterEle = document.querySelector('.notification_center_bottom')
// 我要投递模块的通知中心 渲染函数
function notice(data){
    str = "";
    data.forEach((item)=>{
        str +=`
        <div class="bottom_item">
        <div class="left_text">
          <div class="circular"></div>
          <p>${item.culture}</p>
          <p>${item.purpose}</p>
        </div>
        <div class="right_time">
          <a href="#">${item.address}</a>
        </div>
      </div>
        `
    });
    noticeCenterEle.innerHTML = str;
}

// 获取 感兴趣的职类 元素
let interested = document.querySelector(".major_detailsFilm");
// 感兴趣的职类 渲染函数
function interestedFn(data){
  str = "";
  data.forEach((item)=>{
    str += `
  <div class="major_detailsItem">
    <div class="major_group_details">
    <div class="content">
      <p>${item.title}</p>
      ${item.content}
      <button class="content_btn">
        马上申请<i class="iconfont icon-Rrl_s_145"></i>
      </button>
    </div>
  </div>
  <!-- 右边图片容器 -->
  <div class="right_img_container">
  <img src=${item.cover} alt="">
  </div>
  </div>
    `;
  });
  interested.innerHTML = str;
};

// 获取 成长与福利 的元素
let newcomer = document.querySelector('.newcomer_container');
// 成长与福利  渲染函数
function newPeople(data){
  str = "";
  data.forEach((item)=>{
    str += `
     <div class="newcomer_container_content">
    <div class="left_item">
      <img
        src=${item.cover}
        alt=""
      />
    </div>
    <div class="right_item">
      <p>${item.title}</p>
      <p>
        ${item.content}
      </p>
    </div>
  </div> 
    `
  });
  newcomer.innerHTML = str;
  newcomer.lastElementChild.lastElementChild.style.padding = `${Ant_Group(52)} ${Ant_Group(112)} ${Ant_Group(52)} ${Ant_Group(56)}`;
};

// 获取 学长学姐说 元素
let senior = document.querySelector('.cardBox > ul');
// 学长学姐说 渲染函数
function seniorFn (data){
  str = "";
  data.forEach((item)=>{
    str += `
    <li>
    <div class="card_item_container">
      <!-- 卡片项目内容 -->
      <div class="card_item_content">
        <!-- 图片区域 -->
        <div class="img_container">
          <img
            src=${item.url} alt=""
          />
        </div>
        <!-- 文本区域 -->
        <div class="text_container">
          <!-- 职业 -->
          <p>${item.culture}</p>
          <div class="text_item">
            <!-- 文本内容 -->
            <div class="text_item_content">
              <h2>${item.purpose}</h2>
              <span>
                ${item.development}
              </span>
            </div>
          </div>
          <!-- 人物信息块 -->
          <div class="people_info_bar">
            <div class="people_info">
              <div class="job_and_img">
                <div class="small_img_container">
                  <img
                    src=${item.url} alt=""
                  />
                </div>
                <p>${item.address}</p>
              </div>
              <button class="pointer">
                了解更多<i class="iconfont icon-xialajiantou1"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
    `;
  });
  senior.innerHTML = str;
};


